<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .box{
            border: 1px solid black;
            min-height: 400px;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li @click="page='HomePage'">首页</li>
            <li @click="page='ListPage'">列表</li>
            <li @click="page='OrderPage'">订单</li>
            <li @click="page='AboutPage'">我的</li>
        </ul>
        <div class="box">
            <!-- <home-page v-if="page=='HomePage'"></home-page>
            <list-page v-if="page=='ListPage'"></list-page>
            <order-page v-if="page=='OrderPage'"></order-page>
            <about-page v-if="page=='AboutPage'"></about-page> -->
            
            <!-- 
                动态组件也可以认为是一个页面占位组件 , 没有页面结构,没有样式.
                但该组件通过is属性的取值，可以用于渲染任何被定义的组件
            -->
            <component v-bind:is=" page "></component>
        </div>
    </div>
    <script type="module"> 
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        import HomePage from "./components/HomePage.js";
        import ListPage from "./components/ListPage.js"
        import OrderPage from "./components/OrderPage.js"
        import AboutPage from "./components/AboutPage.js"

        createApp({
            components: {
                HomePage,ListPage,OrderPage,AboutPage
            },
            data(){
                return {
                    page:"HomePage"
                }
            }
        }).mount("#app")
    </script>
</body>
</html>